<template>
  <el-date-picker  :type="type" v-model="valueModel"
                  range-separator="至" :start-placeholder="placeholders[0]" :end-placeholder="placeholders[1]"
                  :pickerOptions="pickerOptions" :popper-options="popper_options"
                  @change="onChange" clearable></el-date-picker>
</template>

<script setup>
import {ref, watch, inject} from 'vue';

import Layers from "@/lang/layers/index";
import Asserts from "@/lang/core/asserts";
import setting from "@/widget/provider/setting";
import {usePopperOptions} from "@/widget/use/use-popper-options.js";

/**
 * 日期范围选择
 *
 * 这个组件有个潜在的条件，就是起止日期必选，实用性并没有想得那么强
 *
 * 注意：这个组件的序列化结果，结果是一个数组，需要做二次解析
 */
const props = defineProps({
    // 字段名
    name: {type: String}
    // 类型，默认输入框
    , type: {type: String, default: 'daterange'}
    // 默认值
    , value: {type: Array, default: undefined}
    // 文字提示
    , placeholder: {type: [String, Array], default: () => ['开始日期', '结束日期']}
    // 原生的参数设置
    , options: {type: Object, default: Layers.object}
    // 原生的快捷键设置
    , shortcuts: {type: [Array, Boolean], default: undefined}
});

// Emits
const emit = defineEmits(['change']);


/**
 * 组件使用的对象模型
 *
 * @type {FastForm}
 */
const fast_form = inject('fast_form');

/**
 * 组件使用的对象模型
 *
 * @type {FormInput}
 */
const input = fast_form.getFormInput(props.name);
Asserts.notBlank(input, 'form input is undefined:' + props.name);

// 组件 ID
const id = ref(input.id);


// 弹窗配置，没这玩意儿会报错
const popper_options = usePopperOptions();

// 定义要触发的事件，用于更新 v-model 的值
const valueModel = ref(null);

/**
 * 监听父组件传递的 value 变化
 *
 * 如果发生变化，通知到 FormInput，由 FormInput 进行业务流转
 */
watch(() => props.value, (val) => {
    input.setValue(val);
});

/**
 * 用户输入变换事件
 *
 * 通知到 FormInput，由 FormInput 进行业务流转
 *
 * @param val
 */
const onChange = (val) => {
    emit('change', val);
    input.changeValue(val);
}

/**
 * 数据受控函数
 *
 * 数据发生变化的时候，会通知到当前组件
 *
 * @see FormInput
 * @param val
 */
const onChangeValue = (val) => {
    valueModel.value = val;
}

/**
 * 默认的快捷键设置
 *
 * 31 号计算近 3 个月会有一定问题，不过用户可以手动调整，暂不考虑解决此问题。
 * @return {[]}
 */
const getDefaultShortcuts = () => {
    return [
        {
            text: '今天',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '昨天',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                let time = start.getTime() - 3600 * 1000 * 24
                start.setTime(time);
                end.setTime(time);
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '近一周',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '近一个月',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 1);
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '近三个月',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 3);
                picker.$emit('pick', [start, end]);
            }
        }
    ]
}


// 提示性语句
let holder;
if (typeof props.placeholder === 'string') {
    holder = props.placeholder.split(',');
} else {
    holder = props.placeholder;
}
const placeholders = ref(holder);

// 设置快捷键
if (props.shortcuts !== undefined) {
    let st = props.shortcuts;
    if (typeof st === 'boolean') {
        st = getDefaultShortcuts();
    }
    props.options.shortcuts = st;
}

// 原生的参数设置
const pickerOptions = ref(props.options);

// 通知到 FormInput，由 FormInput 进行业务流转
input.setValue(props.value);

// 注册输入组件侦听
input.setDom({onChangeValue})
</script>